<template>
  <div class="login">
  <div class="form">
    <el-card shadow="hover" style="width: 450px;height: 400px;">
        <h3 style="margin: 50px 0px 50px 0px;">系统登陆</h3>
        <el-form :model="Form" status-icon :rules="rules" ref="Form" label-width="90px" style="height:200px">
          <el-form-item label="用户名" prop="username">
          <el-input v-model="Form.username" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" style="margin-top: 30px">
          <el-input type="password" v-model="Form.pass" autocomplete="off" style="width:250px"></el-input>
        </el-form-item>
        <el-row style="margin-top: 50px;">
            <el-col :offset="1">
                <el-form-item>
                <el-button type="primary" @click="submitForm('Form')" style="margin-right: 40px;">登陆</el-button>
                <el-button type="warning" @click="resetForm('Form')">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
    </el-card>
  </div>
</div>
</template>

<script>
import Cookie from 'js-cookie'
import { checkuser,getmenu } from '@/api/index'
export default {
    name:'login',
    data(){
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }  else {
          callback();
        }
      };
        return {
            Form: {
              username:'',
              pass:'',
            },
        rules: {
          username: [
            { validator: validateUserName, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
        }
        }
    },
    methods:{
        login(){
          checkuser(this.Form).then(res => {
            if(res.data.checkerr){
              if(res.data.errtype==='usererr'){ this.usererr() }
              else{ this.passerr() }
              this.resetForm('Form')
            }
            else{
              Cookie.set('usertype',res.data.type)
              Cookie.set('username',res.data.username)
              //根据用户级别为用户动态注册路由组件
              const usertype = res.data.type
              const user_obj = {type:usertype}
              getmenu(user_obj).then(res => {
                this.$store.commit('menu/setmenu',res.data.menu)
                Cookie.set('route',JSON.stringify(res.data.route))
                this.$store.commit('menu/enrollroute',this.$router)
              })
              this.$router.push({name:'echarts'})
            }
          }).catch(err => {
            if(err.code==="ERR_NETWORK")  this.servicerr()
            console.log(err)
          })},
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.login()
          } else {
            this.warning()
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({
          message: '已重置',
          type: 'success'
        });
      },
      //这里是消息框代码段
      warning(){
        this.$notify({
            title: '警告',
            message: '您还未输入账户密码',
            type: 'warning',
            duration: 2500
        });
      },
      servicerr(){
        this.$notify.error({
          title: '错误',
          message: '当前服务器拒绝连接！'
        });
      },
      usererr(){
        this.$notify.error({
          title: '错误',
          message: '您的用户名输入有误！',
          showClose: false,
          duration: 2500
        });
      },
      passerr(){
        this.$notify.error({
          title: '错误',
          message: '您的密码输入有误！',
          showClose: false,
          duration: 2500
        });
      }
    }
}
</script>

<style>
.login{
    background-image: url('../assets/bgimg1.jpg');
    position:absolute;
    left:0; top:0; 
    width:100%;height:100%; 
}
.form{
    width:500px;
    margin: 240px auto 0px;
    opacity: 0.9;
}
h3{
    text-align: center;
}
</style>